<template>
	<div class="register">
		<div class="top">
			<span class="title">{{ hospitalDetailStore.hospitalDetail.hospital.hosname }}</span>
			<span class="level gray">
				<svg
					t="1691569598902"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="4206"
					width="16"
					height="16">
					<path
						d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
						p-id="4207"
						fill="#d81e06"></path>
				</svg>
				{{ hospitalDetailStore.hospitalDetail.hospital.param.hostypeString }}
			</span>
		</div>
		<div class="content">
			<div class="left">
				<img
					:src="'data:image/jpeg;base64,' + hospitalDetailStore.hospitalDetail.hospital.logoData"
					alt=""
					srcset="" />
			</div>
			<div class="right">
				<div class="title">挂号规则</div>
				<div class="time line">
					<div>
						<span class="gray">预约周期：</span>
						<span>10天</span>
					</div>
					<div>
						<span class="gray">放号时间：</span>
						<span>{{ hospitalDetailStore.hospitalDetail.bookingRule?.releaseTime }}</span>
					</div>
					<div>
						<span class="gray">停挂时间：</span>
						<span>{{ hospitalDetailStore.hospitalDetail.bookingRule?.stopTime }}</span>
					</div>
				</div>
				<div class="line">
					<span class="gray">具体位置：</span>
					<span>{{ hospitalDetailStore.hospitalDetail.hospital.param.fullAddress }}</span>
				</div>
				<div class="line">
					<span class="gray">规划路线：</span>
					<span>{{ hospitalDetailStore.hospitalDetail.hospital.route }}</span>
				</div>
				<div class="line">
					<span class="gray">退号时间：</span>
					<span>就诊前一工作日{{ hospitalDetailStore.hospitalDetail.bookingRule.quitTime }}前取消</span>
				</div>
				<div class="title rule">预约挂号规则</div>
				<ol class="rule-info">
					<li
						class="gray line"
						v-for="(item, index) in hospitalDetailStore.hospitalDetail.bookingRule.rule"
						:key="index">
						{{ item }}
					</li>
				</ol>
			</div>
		</div>
		<div class="deparment">
			<div class="leftNav">
				<ul>
					<li
						v-for="(item, index) in hospitalDetailStore.deparmentArr"
						:key="item.depcode"
						:class="{ active: activeIndex === index }"
						@click="changeIndex(index)">
						{{ item.depname }}
					</li>
				</ul>
			</div>
			<div class="deparment-info">
				<div
					class="major-department"
					v-for="(item, index) in hospitalDetailStore.deparmentArr"
					:key="item.depcode"
					:class="{ active: activeIndex === index }">
					<h4 class="name">{{ item.depname }}</h4>
					<ul v-if="item.children">
						<li
							v-for="subItem in item.children"
							class="minor-department"
							:key="subItem.depcode"
							@click="departmentOnClick(subItem)">
							{{ subItem.depname }}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useHospitalDetailStore } from '@/store/hospitalDetail';
import { useUserStore } from '@/store/user';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const userStore = useUserStore();

const hospitalDetailStore = useHospitalDetailStore();

let activeIndex = ref(0);

// 切换预约导航
function changeIndex(i: number) {
	activeIndex.value = i;

	// 滚动到对应位置
	document.querySelectorAll('.major-department')[i].scrollIntoView({
		behavior: 'smooth',
	});
}

// 科室点击回调
function departmentOnClick(item: any) {
	if (userStore.userInfo.token) {
		router.push({
			path: '/hospital/register_step1',
			query: {
				hoscode: route.query.hoscode,
				depcode: item.depcode,
			},
		});
	} else {
		userStore.visible = true;
	}
}
</script>

<style scoped lang="scss">
.register {
	.top {
		display: flex;
		align-items: flex-end;
		.title {
			font-size: 20px;
			margin-right: 18px;
			font-weight: 600;
		}
		.level {
			display: flex;
		}
	}
	.content {
		display: flex;
		margin-top: 40px;
		font-size: 15px;
		.left {
			img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.right {
			margin-left: 30px;
			.line {
				margin-top: 10px;
				font-size: 14px;
				line-height: 22px;
			}
			.time {
				display: flex;
				div {
					width: 140px;
				}
			}
			.title {
				font-size: 16px;
			}
			.title:not(:first-child) {
				margin-top: 40px;
			}
			.rule-info {
				list-style-type: decimal;
				list-style-position: inside;
			}
		}
	}
	.deparment {
		display: flex;
		min-height: 500px;
		margin-top: 40px;
		margin-bottom: 40px;
		.leftNav {
			width: 120px;
			margin-right: 20px;
			background-color: #f8f8f8;
			padding: 4px 0;
			ul {
				width: 100%;
				display: flex;
				flex-direction: column;
				list-style: none;
				position: sticky;
				top: 74px;
				overflow: auto;
				li {
					height: 50px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #666;
					cursor: pointer;
					&.active {
						border-left: 1px solid red;
						color: red;
						background-color: #fff;
					}
					&:hover {
						color: #f66;
					}
				}
			}
		}
		.deparment-info {
			flex: 1;
			.major-department {
				transition: all 300ms;
				padding: 14px 20px 4px 20px;
				&:not(:last-child) {
					margin-bottom: 40px;
				}
				&:hover {
					box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
				}
				h4 {
					color: #666;
					margin-bottom: 1.2em;
					margin-top: 2px;
				}
				ul {
					list-style: none;
					display: flex;
					flex-wrap: wrap;
					.minor-department {
						width: calc(33.333333% - 20px);
						padding-right: 20px;
						font-size: 15px;
						margin-bottom: 14px;
						color: var(--text-color-gray);
						cursor: pointer;
						&:hover {
							color: var(--text-color-blue);
						}
					}
				}
				&.active {
					background-color: #f8f8f8;
					h4 {
						display: flex;
						align-items: center;
						&::before {
							content: '';
							display: block;
							width: 0.2em;
							height: 1em;
							background-color: red;
							border-radius: 0.2em;
							margin-right: 0.4em;
						}
					}
				}
			}
		}
	}
}
</style>
